<#assign basePath=site.url>
<#include "header.html">
<style type="text/css">
body {
	background-image: url("${basePath}img/bgg.jpg");
}

.diwenben{
background-image: url("${basePath}img/diwenben.png");
}
.dibiaoti{
background-image: url("${basePath}img/dibiaoti.png");
}
.headdiv {
    background-image: url("${basePath}img/dibiaoti.png");
	border-bottom-color: #60605f;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-top-color: #60605f;
	border-top-width: 2px;
	border-top-style: solid;
}

.head {
	background-image: url("${basePath}img/shuhua_biaoti00.png");
	background-repeat: no-repeat;
}

.headmore {
	background-image: url("${basePath}img/shuhua_more_00.png");
	background-repeat: no-repeat;
}

.nav {
	margin: 0px;
	margin-top: -3px;
	padding: 0px;
	width: 940px;
	height: 99px;
	clear: both;
	background-image: url("${basePath}img/shuhua_bg_00.png");
	background-repeat: no-repeat;
	padding: 0px;
}

.none {
	margin: 0px;
	padding: 0px;
	background-color: red;
}

.nav li {
	float: left;
	list-style: none;
	padding: 0px;
	margin: 0px;
}

.content {
	background-image: url("${basePath}img/shuhua_bg_00.png");
	width: 906px;
	clear: both;
	padding-left: 17px;
	padding-right: 17px;
	position: relative;
}

.content1 {
	width: 611px;
	height: 651px;
	float: left;
	background-image: inherit;
}

.content1_1 {
	width: 611px;
	height: 372px;
	float: left;
	background-image: url("${basePath}img/di02.jpg");
}

.content1_2 {
	width: 302px;
	float: left;
	background-image: url("${basePath}img/di02.jpg");
	margin-top: 10px;
	height: 260px;
}

.content1_3 {
	margin-left: 5px;
	margin-top: 10px;
	width: 302px;
	height: 260px;
	float: left;
	background-image: url("${basePath}img/di02.jpg");
}

.content1content {
	background-image: url("${basePath}img/di02.jpg");
	height: 453px;
	clear: both;
	padding-top: 0px;
	font-size: 11px;
}

.border-tb {
	border-top-color: #bcbd9d;
	border-top-style: solid;
	border-top-width: 2px;
	border-bottom-color: #bcbd9d;
	border-bottom-style: solid;
	border-bottom-width: 2px;
}

.borderdiv {
	background-color: #bcbd9d;
	height: 2px;
}

.aa {
	opacity: 0.10;
	-moz-opacity: 0.10;
	filter: alpha(opacity = 10);
	background: #1d1e22;
}

.content1content ul {
	color: #000000;
	font-size: 13px;
	margin: 0px;
}

.spanleft {
	float: left;
}

.spanright {
	float: right;
}

.content2 {
	width: 278px;
	height: 495px;
	float: left;
	background-image: inherit;
	margin-left: 17px;
}

.content2_1 {
	margin-top: 20px;
	clear: both;
	position: relative;
}

.content2_1_content {
	background-image: url("${basePath}img/di02.jpg");
	height: 288px;
}

.content2_2 {
	clear: both;
	position: relative;
	margin-top: 5px;
}

.content2_2_content {
	background-image: url("${basePath}img/di02.jpg");
	height: 122px;
}

.content2_3 {
	margin-top: 5px;
	clear: both;
	position: relative;
}

.content2_3_content {
	background-image: url("${basePath}img/di02.jpg");
	height: 113px;
}

.content2content1 span {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 180px;
	height: 100px;
}

.center {
	margin-left: auto;
	margin-right: auto;
	margin-top: 0px;
	clear: both;
	text-align: center;
}

.hezuo {
	margin-top: 0px;
	clear: both;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	width: 906px;
}

.hezuohead {
	background-image: url("${basePath}img/hezuobg.jpg");
	background-repeat: no-repeat;
	height: 29px;
	width: 906px;
}

.hezuoheadtext1 {
	color: white;
	float: left;
	margin-left: 25px;
	margin-top: 5px;
	font-size: 13px;
}

.hezuocentent {
	background-image: url("${basePath}img/di02.jpg");
	clear: both;
	height: 83px;
	width: 924px;
	padding-top: 15px;
}

.nav {
	margin: 0px;
	margin-top: -3px;
	padding: 0px;
	width: 940px;
	height: 99px;
	clear: both;
	background-image: url("${basePath}img/nav02.png");
	background-repeat: no-repeat;
	padding: 0px;
}

.none {
	margin: 0px;
	padding: 0px;
	background-color: red;
}

.nav li {
	float: left;
	list-style: none;
	padding: 0px;
	margin: 0px;
}

.nav1 {
	margin-left: 43px;
}

img {
	border: none;
}

ul {
	margin-left: 5px;
	margin-right: 0px;
	margin-top: 0px;
	margin-bottom: 0px;
	padding: 0px;
}

ul li {
	list-style: none;
	clear: both;
	padding: 2px;
}

.foot {
	background-image: url("${basePath}img/foot_bg.jpg");
	width: 940px;
	height: 116px;
	margin-left: 0px;
}


.ps {
	background-image: url("${basePath}img/paimai_ps.png");
}
.border{

border-color: #ff7b7b;
border-style: solid;
border-width: 2px;
}
.borderold{

border-color: #2e2e2e;
border-style: solid;
border-width: 2px;
}
img {
	display:block;
	float: left;
}
</style>
<link href="${basePath}css/site.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
var last=1;
var index=0;
var max=7;
$(document).ready(function(){
	
	  $(".smimg").click(function(img){
	      //  alert();
	       $("#showimg").attr("src",$(img.target).attr("src"));
	       $("#showimg").hide();
	       $("#showimg").slideDown();
	       $(".smimg").removeClass("border");
	       $(".smimg").addClass("borderold");
	       $(img.target).removeClass("borderold");
	       $(img.target).addClass("border");
	       if(last!=1){
	    	   $(last).removeClass("border");
	    	   $(last).addClass("borderold");
	       }
	       last=img.target;
	       var ids= $(img.target).attr("id");
	       ids=ids.substring(1);
	       index=parseInt(ids);
	       
	  });
	  max= $(".smimg").length-1;
	  $("#pre").click(function(img){
		  index--;
	      if(index<0){
	    	  index=max; 
	      }
	      var id="#m"+index;
	      $("#showimg").attr("src",$(id).attr("src"));
	      $("#showimg").hide();
	      $("#showimg").slideDown();
	       $(".smimg").removeClass("border");
	       $(".smimg").addClass("borderold");
	      $(id).removeClass("borderold");
	       $(id).addClass("border");
	       if(last!=1){
	    	   $(last).removeClass("border");
	    	   $(last).addClass("borderold");
	       }
	       last=$(id);
	      
	  });
	
	  $("#next").click(function(img){
		  index++;
	      if(index>max){
	    	  index=0; 
	      }
	      var id="#m"+index;
	      $("#showimg").attr("src",$(id).attr("src"));
	      $("#showimg").hide();
	      $("#showimg").fadeIn();
	       $(".smimg").removeClass("border");
	       $(".smimg").addClass("borderold");
	      $(id).removeClass("borderold");
	       $(id).addClass("border");
	       if(last!=1){
	    	   $(last).removeClass("border");
	    	   $(last).addClass("borderold");
	       }
	       last=$(id);
	  });	  
});


</script>
</head>
<body>
	<#include "../include/headimg.html"> <#include "nav_古玩.html">
	<div class="content">
		<div style="position: relative;height: 165px;" class="diwenben">
				<div class="headdiv" style="width: 906px; height: 28px;">
					<div class="head">&nbsp;玉&nbsp;&nbsp;器</div>
					<div class="headmore"><a href="#" style="color: white;">更多</a></div>
				</div>
				<div class="clear"></div>
				<div style="position: relative;padding-top: 5px;">
					<div  style="position:absolute; z-index: 0;width: 906px;margin-left: 6px;">
					<@cms_content_list count='7' channelId="42" titLen='18' orderBy='9' channelOption='1'>
					<#list tag_list as a>
					<a href="${a.url}"><img style="width: 122px;height:122px;margin-left:5px;;padding:0px;" src="${a.typeImg!site.defImg}"/></a>
					</#list>
						</@cms_content_list>
					</div>
					<img style="margin:0px;padding:0px; position:absolute;top:120px; z-index: 100;width: 906;height:25px" alt="" src="${basePath}img/guwan_line.png">
				</div>
				
				
		</div>
		<div style="margin-top: 23px;position: relative;height: 170px;" class="diwenben">
				<div class="headdiv" style="width: 906px; height: 28px;">
					<div class="head">&nbsp;字&nbsp;&nbsp;画</div>
					<div class="headmore">更多</div>
				</div>
				<div class="clear"></div>
				<div style="position: relative;padding-top: 5px;">
					<div  style="position:absolute; z-index: 0;width: 906px;margin-left:6px;">
					<@cms_content_list count='7' channelId="42" titLen='18' orderBy='9' channelOption='1'>
					<#list tag_list as a>
					<a href="${a.url}"><img style="width: 122px;height:122px;margin-left:5px;;padding:0px;" src="${a.typeImg!site.defImg}"/></a>
					</#list>
					</@cms_content_list>
					</div>
					<img style="margin:0px;padding:0px; position:absolute;top:120px; z-index: 100;width: 906;height:25px" alt="" src="${basePath}img/guwan_line.png">
				</div>
		</div>
		<div style="margin-top: 23px;position: relative;height: 170px;" class="diwenben">
				<div class="headdiv" style="width: 906px; height: 28px;">
					<div class="head">&nbsp;瓷&nbsp;&nbsp;器</div>
					<div class="headmore">更多</div>
				</div>
				<div class="clear"></div>
			<div style="position: relative;padding-top: 5px;">
					<div  style="position:absolute; z-index: 0;width: 906px;margin-left: 6px;">
					<@cms_content_list count='7' channelId="42" titLen='18' orderBy='9' channelOption='1'>
					<#list tag_list as a>
					<a href="${a.url}"><img style="width: 122px;height:122px;margin-left:5px;;padding:0px;" src="${a.typeImg!site.defImg}"/></a>
					</#list>
					</@cms_content_list>
					</div>
					<img style="margin:0px;padding:0px; position:absolute;top:120px; z-index: 100;width: 906;height:25px" alt="" src="${basePath}img/guwan_line.png">
				</div>
		</div>
		
	</div>
	<div class="clear" ></div>
	 <#include "foot.html">

</body>
</html>